<template>
  <div class="pageBox">
  用户名：<a-input placeholder="请输入" style="width: 200px" v-model="listName" /> <a-button type="primary" @click="reset">重置</a-button> <a-button @click="demand">查询</a-button>
  <div class="list_data">
    <a-button type="primary" class="list_but" @click="showModal" v-if="listButton.addition">+ 新建</a-button>
    <a-table  :dataSource="dataSource" :columns="columns" :pagination="false" >
      <template slot="operation" slot-scope="text, record">
        <span class="compile" @click="compile(record.id)" >{{listButton.editor}}</span> |
        <span class="deletes" @click="showConfirm(record.id)" >{{listButton.cancel}}</span>
      </template>
    </a-table>
  </div>
    <a-modal
      :title="dataSourceTxte"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      destroyOnClose
      class="modal"
    >
      <span>用户名：</span> <a-input v-model="nameList.userName" placeholder="请输入" style="width: 200px;margin:0 0 10px 0"/> <br>
      <span>密码：</span> <a-input type="password" placeholder="请输入" v-model="nameList.password" style="width: 200px;margin:0 0 10px 0"/> <br>
      <span>权限角色：</span> <a-select defaultValue="请选择" style="width: 120px" @change="handleChange">
                  <a-select-option :value="limit.name" v-for="(limit,index) in limits" :key="index">{{limit.name}}</a-select-option>
                </a-select>
    </a-modal>

    <div class="paging">
      <div class="total">共 {{listPage}} 条记录 第 {{listGets.pageSize}} / {{allPage}} 页</div>
      <a-pagination
          showQuickJumper
          showSizeChanger
          :defaultCurrent="1"
          :defaultPageSize="listGets.limit"
          :total = listPage
          @change="onChange"
      />
    </div>
    <!-- <a-pagination showQuickJumper :defaultCurrent="1" :defaultPageSize="5" :total="listPage" @change="onChange" class="paging"/> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      dataSource: [],
      dataSourceTxte: "添加管理员",
      columns: [
        {
          title: "用户名",
          width: "30%",
          dataIndex: "name"
        },
        {
          title: "角色",
          width: "20%",
          dataIndex: "rname"
        },
        {
          title: "操作",
          width: "20%",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" }
        }
      ],
      listGets: {
        limit: 10,
        pageSize: 1,
        name: ""
      },
      allPage:'',
      listName: "",
      listPage: null,
      limits: "",
      nameList: {
        userName: "",
        password: "",
        nameId: "",
        id: ""
      }, //添加模态框数据
      listButton: {
        addition: "", //新建
        editor: "", //编辑
        cancel: "" //删除
      } //按钮数据
    };
  },
  methods: {
    compile(id) {
      this.visible = true;
      this.dataSourceTxte = "编辑管理员";
      this.nameList.id = id;
      this.$ajax
        .get("/kmd-field-web/admin/queryById", { params: { id: id } })
        .then(res => {
          this.nameList.userName = res.data.result.name;
        });
    }, //点击编辑
    showConfirm(id) {
      let _this = this;
      this.$confirm({
        title: "警告",
        content: "确定删除吗",
        onOk() {
          _this.$ajax
            .get("/kmd-field-web/admin/deleteAdmin", { params: { id: id } })
            .then(res => {
              if (res.data.statusCode === 200) {
                _this.$message.success("删除成功", 2);
                _this.listData();
              }
              if (res.data.statusCode === 500) {
                _this.$message.success("删除失败", 2);
              }
            });
        },
        onCancel() {}
      });
    }, //点击删除
    onChange(pageNumber,limit) {
      this.listGets.pageSize = pageNumber;
      this.listGets.limit = limit;
      this.listData();
    }, //分页数据
    handleChange(value) {
      // if(value)
      this.nameList.nameId = value;
    },
    showModal() {
      this.nameList.userName = "";
      this.nameList.password = "";
      this.nameList.nameId = "";
      this.visible = true;
    },
    handleOk(e) {
      if (this.dataSourceTxte == "编辑管理员") {
        this.$ajax
          .post("/kmd-field-web/admin/modify", {
            id: this.nameList.id,
            name: this.nameList.userName,
            password: this.nameList.password,
            rname: this.nameList.nameId
          })
          .then(res => {
            console.log(res)
            if (res.data.statusCode === 200) {
              this.listData();
              this.$message.success("编辑成功!");
            }
            if (res.data.statusCode === 500) {
              this.$message.success("操作失败");
            }
          });
      } else {
        //添加管理员,先判空
        if(this.nameList.userName == ''){
          this.$message.warning("用户名不能为空!");
          return;
        }
        if(this.nameList.password == ''){
          this.$message.warning("密码不能为空!");
          return;
        }
        if(this.nameList.nameId == ''){
          this.$message.warning("权限角色不能为空!");
          return;
        }
        this.$ajax
          .post("/kmd-field-web/admin/insertAdmin", {
            name: this.nameList.userName,
            password: this.nameList.password,
            rname: this.nameList.nameId
          })
          .then(res => {
            if (res.data.statusCode === 200) {
              this.$message.success("操作成功", 2);
            }
            if (res.data.statusCode === 500) {
              this.$message.error(res.data.message);
            }
          });
      }
    }, //模态框确认点击事件
    handleCancel(e) {
      this.visible = false;
    },
    listData() {
      this.$ajax
        .get("/kmd-field-web/admin/adminPage", { params: this.listGets })
        .then(res => {
          this.dataSource = res.data.records;
          this.listPage = res.data.total;
          this.allPage = Math.ceil(this.listPage/this.listGets.limit)
        });
    }, //默认请求列表数据
    reset() {
      this.listName = "";
      this.listGets.name = "";
      this.listData();
    }, //重置按钮
    demand() {
      this.listGets.name = this.listName;
      this.listData();
    } //查询按钮
  },
  created() {
    let titleName = sessionStorage.getItem("stairH1");
    this.$ajax
      .get("/kmd-field-web/admin/queryBtn", {
        params: { title: titleName.trim() }
      })
      .then(res => {
        for (var i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].title == "新建") {
            this.listButton.addition = res.data.list[i].title;
          }
          if (res.data.list[i].title == "编辑") {
            this.listButton.editor = res.data.list[i].title;
          }
          if (res.data.list[i].title == "删除") {
            this.listButton.cancel = res.data.list[i].title;
          }
        }
      });

    this.$ajax.get("/kmd-field-web/role/queryRoleType").then(res => {
      this.limits = res.data.list;
    });
    this.listData();
  }
};
</script>
<style scoped lang="less">
.list_data {
  margin-top: 24px;
}
.list_but {
  margin-bottom: 10px;
}
.pageBox {
  overflow: hidden;
}
.compile {
  color: blue;
}
.compile:hover {
  text-decoration: underline;
  cursor: pointer;
}
.deletes {
  color: blue;
}
.deletes:hover {
  text-decoration: underline;
  cursor: pointer;
}
/* 模态框样式 */
.modal{
  span{
    display: inline-block;
    width:80px;
    text-align: right;
  }
}
</style>
